<template>
    <div>
        <myheader></myheader>
        <myswiper :swiper='swiperData'></myswiper>
        <myicon :icon='iconData'></myicon>
        <myrecommend :recommend='recommnedData'></myrecommend>
        <myweekend :weekend='weekendData'></myweekend>
        <myfooter></myfooter>
    </div>
</template>


<script>
import myheader from '../components/header'
import myfooter from '../components/footer'
import myswiper from '../components/skill/swiper'
import myicon from '../components/index/index-icon'
import myrecommend from '../components/index/recommend'
import myweekend from '../components/index/weekend'
import axios from 'axios'
    export default{
        data () {
            return {
                iconData:[],
                recommnedData:[],
                swiperData:[],
                weekendData:[],
                lastCity:''
            }
        },
        methods: {
            getData(){
                axios.get('/api/index.json?city='+this.$store.state.city).then(result=>{     
                    if(result.data.ret==true){
                      this.iconData=result.data.data.iconList
                       this.recommnedData=result.data.data.recommendList
                        this.swiperData=result.data.data.swiperList
                         this.weekendData=result.data.data.weekendList
                    }
                })
            }
        },
        mounted() {
            this.getData()
            this.lastCity=this.$store.state.city
        },
        activated () {
            if( this.lastCity!==this.$store.state.city){
                this.getData()
                 this.lastCity=this.$store.state.city
            }        
        },
        components:{
            myheader,
            myfooter,
            myswiper,
            myicon,
            myrecommend,
            myweekend
        }
    }
</script>


<style lang='scss'>
div{
    h1{
       font-size: 35px;
    }
}
</style>

